<template>
  <el-dialog
    v-loading="loading"
    title="预分组测试"
    :visible.sync="visible"
    width="800px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <!-- 基本信息 -->
    <div class="item-title">基本信息</div>
    <el-row>
      <el-col :span="8">
        <span class="label">科室：</span>
        <span class="value"> {{ patinfo.科室 }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">姓名： </span>
        <span class="value">
          {{ `${patinfo.patname} ，${patinfo.gender}，${patinfo.age}` }}</span
        >
      </el-col>
      <el-col :span="8">
        <span class="label">住院号：</span>
        <span class="value"> {{ patinfo.fno }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">床位号：</span>
        <span class="value"> {{ patinfo.床号 }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">主管医生：</span>
        <span class="value"> {{ patinfo.医生 }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">入院日期：</span>
        <span class="value">{{ patinfo.itime }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">出院日期：</span>
        <span class="value">{{ patinfo.otime }}</span>
      </el-col>
    </el-row>
    <div class="item-title" v-if="resInfo">分组信息</div>
    <el-row v-if="resInfo">
      <el-col :span="24">
        <span class="label">分组名：</span>
        <span class="value"
          >{{ resInfo.DrgGroup }} - {{ resInfo.GroupName }}</span
        >
      </el-col>
      <el-col :span="8">
        <span class="label">床日： </span>
        <span class="value"> {{ resInfo.StayDays }} </span>
      </el-col>
      <el-col :span="8">
        <span class="label">权重： </span>
        <span class="value">
          {{ resInfo.Weight }}
        </span>
      </el-col>
      <el-col :span="8">
        <span class="label">标准金额： </span>
        <span class="value"> {{ resInfo.StayFee }}元 </span>
      </el-col>
    </el-row>
    <div class="item-title">诊断记录</div>
    <el-table :data="diagnostics" border style="width: 100%">
      <el-table-column prop="疾病编码" label="诊断编码"> </el-table-column>
      <el-table-column prop="诊断名称" label="诊断名称" width="400">
        <template slot-scope="{ row, $index }">
          <el-select
            :value="row.诊断名称"
            placeholder="请选择"
            @change="changeItem($index, $event, 0)"
            filterable
            remote
            :remote-method="getdiagnosticOptions"
          >
            <el-option
              v-for="(item, index) in diagnosticOptions"
              :key="index"
              :label="item.诊断名称"
              :value="item.疾病编码"
            >
              {{ item.疾病编码 + "-" + item.诊断名称 }}
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row, $index }">
          <i
            class="iconfont icon-jiahaob mini-icon"
            @click="addTableItem(row, $index, 0)"
          ></i>
          <i
            class="iconfont icon-jiantou_qiehuanxiangshang mini-icon"
            @click="upTableItem(row, $index, 0)"
          ></i>
          <i
            class="iconfont icon-jiantou_qiehuanxiangxia mini-icon"
            @click="downTableItem(row, $index, 0)"
          ></i>
          <i
            v-if="diagnostics.length > 1"
            class="iconfont icon-shanchu mini-icon"
            @click="delTableItem(row, $index, 0)"
          ></i>
        </template>
      </el-table-column>
    </el-table>
    <div class="item-title" style="margin-top: 20px">
      手术记录
      <i
        style="margin-left: 5px"
        class="iconfont icon-jiahaob mini-icon"
        @click="addTableItem(row, $index, 1)"
      ></i>
    </div>
    <el-table :data="operations" border style="width: 100%">
      <el-table-column prop="optcode" label="手术编码"> </el-table-column>
      <el-table-column prop="optname" label="手术名称" width="400">
        <template slot-scope="{ row, $index }">
          <el-select
            :value="row.optname"
            placeholder="请选择"
            @change="changeItem($index, $event, 1)"
            filterable
            remote
            :remote-method="getoperationOptions"
          >
            <el-option
              v-for="(item, index) in operationOptions"
              :key="index"
              :label="item.optname"
              :value="item.optcode"
            >
              {{ item.optcode + "-" + item.optname }}
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row, $index }">
          <i
            class="iconfont icon-jiantou_qiehuanxiangshang mini-icon"
            @click="upTableItem(row, $index, 1)"
          ></i>
          <i
            class="iconfont icon-jiantou_qiehuanxiangxia mini-icon"
            @click="downTableItem(row, $index, 1)"
          ></i>
          <i
            class="iconfont icon-shanchu mini-icon"
            @click="delTableItem(row, $index, 1)"
          ></i>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose" type="primary" size="small" plain
        >取消</el-button
      >
      <el-button @click="saveGroup" type="primary" size="small"
        >预分组</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { groupProxy, groupSearch } from "@/api/commonApi";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      diagnostics: [],
      operations: [],
      diagnosticOptions: [], //诊断可选项
      operationOptions: [], //手术可选项
      defaultOptions: [], //手术默认选项
      patinfo: {},
      defaultCode: "",
      resInfo: null
    };
  },
  methods: {
    //保存分组
    async saveGroup() {
      const params = {
        jzh: this.patinfo.id,
        gender: this.patinfo.gender === "男" ? "1" : "2",
        age: this.patinfo.age.replace("岁", ""),
        ageDay: 0,
        bodyWeight: 0,
        dept: this.patinfo.科室,
        inDays: 0,
        leavingType: 0,
        zdList: this.diagnostics.map(v => v.疾病编码),
        ssList: this.operations.map(v => v.optcode),
        brxm: this.patinfo.patname,
        chs_t: 0,
        save_ly: 0
      };
      const res = await groupProxy(params);
      this.$message.success("预分组成功");
      // this.$emit("update:visible", false);
      this.resInfo = JSON.parse(res.data);
      console.log(this.resInfo);
    },
    handleClose() {
      this.$emit("update:visible", false);
      this.resInfo = null;
    },
    initData(patinfo, diagnostics, operations) {
      console.log(patinfo, "info--");
      this.resInfo = null;
      this.patinfo = patinfo;
      this.diagnostics = diagnostics;
      this.getDefaultoperationOptions(patinfo.discode);
      this.defaultCode = patinfo.discode;
      this.getOperations(patinfo);
    },
    //获取手术默认选项
    async getDefaultoperationOptions(code) {
      const res = await groupSearch({ lb: 3, key: code });
      const result = (res.data || []).map(v => {
        return {
          optcode: v.jbbm,
          optname: v.zdms
        };
      });
      this.operationOptions = result;
      this.defaultOptions = result;
    },
    //获取手术记录
    async getOperations(resInfo) {
      const res = await groupSearch({ lb: 4, key: resInfo.id });
      const result = (res.data || []).map(v => {
        return {
          optcode: v.ssbm,
          optname: v.ssmc
        };
      });
      this.operations = result;
    },
    //远程搜索诊断
    async getdiagnosticOptions(key) {
      if (!key) {
        this.diagnosticOptions = [];
        return;
      }
      const res = await groupSearch({ lb: 1, key });
      const result = (res.data || []).map((v, i) => {
        return {
          疾病编码: v.jbbm,
          诊断名称: v.jbmc
        };
      });
      this.diagnosticOptions = result.filter(v => v.疾病编码);
    },
    //远程搜索手术
    async getoperationOptions(key) {
      if (!key) {
        this.operationOptions = this.defaultOptions;
        return;
      }
      const res = await groupSearch({ lb: 2, key });
      const result = (res.data || []).map(v => {
        return {
          optcode: v.ssbm,
          optname: v.ssmc
        };
      });
      this.operationOptions = result;
    },
    //新增
    addTableItem(row, index, type) {
      //type 0 诊断 1手术
      if (!type) {
        return this.diagnostics.push({
          疾病编码: "",
          诊断名称: ""
        });
      }
      this.operations.push({
        optcode: "",
        optname: ""
      });
    },
    //上移
    upTableItem(row, index, type) {
      if (index === 0) return;
      if (!type) {
        this.diagnostics.splice(index, 1);
        this.diagnostics.splice(index - 1, 0, row);

        if (this.defaultCode !== this.diagnostics[0]?.疾病编码 || "") {
          this.getDefaultoperationOptions(this.diagnostics[0]?.疾病编码);
          this.defaultCode = this.diagnostics[0]?.疾病编码 || "";
        }
        return;
      }
      this.operations.splice(index, 1);
      this.operations.splice(index - 1, 0, row);
    },
    //下移
    downTableItem(row, index, type) {
      if (!type) {
        if (index === this.diagnostics.length - 1) return;
        this.diagnostics.splice(index + 2, 0, row);
        this.diagnostics.splice(index, 1);
        if (this.defaultCode !== this.diagnostics[0]?.疾病编码 || "") {
          this.getDefaultoperationOptions(this.diagnostics[0]?.疾病编码);
          this.defaultCode = this.diagnostics[0]?.疾病编码 || "";
        }
        return;
      }
      if (index === this.operations.length - 1) return;
      this.operations.splice(index + 2, 0, row);
      this.operations.splice(index, 1);
    },
    //删除
    delTableItem(row, index, type) {
      //type 0 诊断 1手术
      if (!type) {
        this.diagnostics.splice(index, 1);
      }
      type && this.operations.splice(index, 1);
    },
    changeItem(index, e, type) {
      //type 0 诊断 1手术
      //诊断
      if (!type) {
        //匹配选中项目
        const dit = this.diagnosticOptions.find(v => v.疾病编码 === e) || {};
        console.log(e, dit);
        this.$set(this.diagnostics, index, dit);
        return;
      }
      //手术
      const oit = this.operationOptions.find(v => v.optcode === e) || {};
      console.log(e, oit);
      this.$set(this.operations, index, oit);
    }
  }
};
</script>

<style lang="scss" scoped>
.item-title {
  font-size: 14px;
  font-weight: bold;
  border-left: 2px solid #1890ff;
  margin-bottom: 10px;
  padding-left: 5px;
}
.el-col {
  margin-bottom: 10px;
}
.label {
  color: #333;
}
.value {
  color: #666;
}
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
}
::v-deep .el-table .el-table__cell {
  padding: 4px 0;
}
.mini-icon {
  margin: 0 5px;
  color: #1890ff;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}
.el-select {
  ::v-deep .el-input__inner {
    height: 20px;
    line-height: 20px;
    border: none !important;
    background: none !important;
  }
  ::v-deep .el-input__icon {
    line-height: 20px;
  }
}
</style>
